<template>
  <div class="page page-blog-wrapper">
    <div class="banner">
      <img :src="BlogBanner" lazy />
    </div>

    <div class="content">
      <div class="year-list">
        <div class="year" :class="currentYear == item.title && 'active'" v-for="(item, index) in yearList" :key="index" @click="changeYear(item)">{{ item.title }}</div>
      </div>
      <el-card v-for="(item,index) in list" :key="index" style="margin-bottom: 10px;">
        <div class="article">
          <b>{{ item.date }}</b>
          <div class="link">
            <a v-if="item.link" :href="item.link" :title="item.title" target="_blank" rel="nofollow">{{ item.title }}</a>
            <span v-else>{{ item.title }}</span>
            <a v-if="item.videoLink" :href="item.videoLink" :title="item.title" target="_blank" class="iconfont icon-shipin" rel="nofollow"></a>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BlogBanner from '@/assets/images/blog/blog_banner.jpg'
import BlogDatas from './data';

const currentYear = ref(2024)
const yearList = ref([
  { title: '2024', value: 2024 },
  { title: '2023', value: 2023 }
])
const list = ref(BlogDatas[currentYear.value])
const changeYear = (item) => {
  currentYear.value = item.value
  list.value = BlogDatas[item.value]
}

</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 0;
  padding-bottom: 26.3%;
  background: #ccc;
  img {
    width: 100%;
  }
}
.content {
  margin: 20px auto;
  padding: 0 5%;
  .year-list {
    display: flex;
    justify-content: center;
    .year {
      line-height: 50px;
      font-size: 18px;
      margin-right: 30px;
      cursor: pointer;
    }
    .active {
      color: #4d85ff;
      font-weight: bold;
    }
  }
  .article {
    font-size: 16px;
    color: #333;
    display: flex;
    flex-direction: column;
    b {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .link {
      display: flex;
      justify-content: space-between;
    }
    a {
      text-decoration: underline;
      color: #333;
      &.icon-shipin {
        color: #0059b2;
        margin-left: 10px;
        text-decoration: none;
        font-size: 20px;
      }
      &:hover {
        color: #0059b2;
      }
    }
  }
}
</style>